<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-JSONP</title>
</head>
<body>
  <button id="btn">发ajax请求(jsonp)</button>
  <script>
    /* 
    1. jsonp
      简单说: 利用script发送跨域请求
      前台
        创建script标签, 指定src为跨域的请求url
        定义一个接收数据的函数, 并将函数名指定为query参数
      后台
        确定要返回的响应数据data后, 读取回调函数名
        返回函数调用的js代码: callback(data)
        const data = 'xxxx'
        const callback = req.query.callback
        res.send(`${callback}(${data})`)

    */
    document.querySelector('#btn').onclick = () => {
     // 创建script标签, 指定src为跨域的请求url
     const script = document.createElement('script')
     script.src = 'http://localhost:8081/jsonp-server?callback=fn'

     // 将script标签添加到body中 => 浏览器就会自动发请求
     document.body.appendChild(script)
    }

    // 定义一个接收数据的函数, 并将函数名指定为query参数
    function fn(data) {
      console.log(data)
      alert(data)
    }
    // http://localhost:8081/static/css/a.css
  </script>
</body>
</html>